import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import Topic from './components/Topic';
import List from './components/List';
import Writer from './components/Writer';
import Recommed from './components/Recommed';
import { actionCreator  } from './store';
import { 
    HomeWrapper,
    HomeLeft,
    HomeRight,
    BackTop } from './style'
class Home extends PureComponent {
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img 
                    className='banner-img'
                    src="https://upload.jianshu.io/admin_banners/web_images/5055/348f9e194f4062a17f587e2963b7feb0b0a5a982.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="" />
                    <Topic/>
                    <List/>
                </HomeLeft>
                <HomeRight>
                    <Recommed/>
                    <Writer/>
                </HomeRight>
                {this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : null}
            </HomeWrapper>
        )
    }

    componentDidMount(){
        this.props.changeHomeData();
        this.bindEvents();
    }

    componentWillUnmount() {
        window.removeEventListener('scroll',this.props.changeScrollTopShow)
    }

    handleScrollTop = () => {
        window.scrollTo(0,0);
    }

    bindEvents() {
        window.addEventListener('scroll',this.props.changeScrollTopShow)
    }
}

const mapState = (state) => ({
    showScroll: state.getIn(['home','showScroll'])
})

const mapDispatch = (dispatch) => ({
    changeHomeData(){
        dispatch(actionCreator.getHomeInfo())
    },
    changeScrollTopShow(e) {
        if(document.documentElement.scrollTop > 100) {
            dispatch(actionCreator.toggleTopShow(true))
        }else {
            dispatch(actionCreator.toggleTopShow(false))
        }
    }
})

export default connect(mapState, mapDispatch)(Home)